<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="myname">
        <h1>{{myname}}</h1>
        <br> 米： <input type="text" v-model="meters">
        <br> 千米： <input type="text" v-model="kilometers">
        <br>
        <input type="text" v-model="obj.des.shengao">
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    myname: "",
                    meters: 0, //米
                    kilometers: 0, //千米
                    obj: {
                        name: "小李",
                        age: 18,
                        des: {
                            shengao: "180"
                        }
                    },
                    arr: ["儿童劫", "托儿索", "小学僧"]
                }
            },
            mounted() {},
            methods: {},
            computed: {},
            watch: { //监听器  监听数据的变化和路由的变化等  可以获取新的值 和原来的值
                myname(newVal, oldVal) {
                    //newVal 新的值  oldVal 原来的值
                    console.log(newVal, oldVal)
                },
                meters(newVal, oldVal) { //监听米的数据
                    this.kilometers = newVal / 1000;
                },
                kilometers(newVal, oldVal) {
                    this.meters = newVal * 1000;
                },
                // obj(newVal, oldVal) {
                //     console.log(newVal, oldVal)
                // }
                "obj": { //watch属性监听对象 加deep:true
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal)
                    },
                    deep: true, //深度监听对象的变化
                    immediate: true //进入页面就监听一次
                }
            }
        })
    </script>
</body>

</html>